HTML5 canvas

HTML5 canvas je HTML prvek zahrnutý ve specifikaci HTML5. Slouží k dynamickému skriptovatelnému vykreslování bitmap a grafických primitiv, podobně jako je to známo např. z vývojového prostředí VCL Delphi nebo programovacího jazyka C++.

Struktura

Prvek canvas sestává z regionu, na který lze kreslit, definovaného v HTML kódu šířkou a výškou. Po zadefinování k němu lze přistupovat pomocí JavaScriptu za použití mnoha kreslících funkcí podobných jiným běžným 2D API. To umožňuje dynamicky generovat grafiku. Případné využití je v oblasti vykreslování grafů, animací, her (i 3D) a úpravy obrázků.

Podpora prohlížečů

Původně byl představen společností Apple pro použití v operačním systému OS X pro WebKit komponenty, kterými jsou realizovány např. dashboard widgety (miniaplikace rozmístitelné na pracovní ploše, známé také z Windows Vista) nebo prohlížeč Safari. Později byl implementován do prohlížečů s jádrem Gecko (např. Mozilla Firefox), do prohlížeče Opera a také standardizován WHATWG pro nově navržené specifikace next-gen webových technologií.

Novell poskytuje XForms plugin pro Internet Explorer, který také poskytuje podporu pro Canvas. Je rovněž vyvíjeno nemalé nezávislé úsilí pro podporu canvas v IE, které nevyžaduje pluginy a funguje čistě na VML a JavaScriptu.

Příklad

Vykreslení dvou překrývajících se obdélníků (jeden částečně průhledný).

<html>
 <head>
 <script type="application/javascript">
 function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
 }
 </script>
 </head>
 <body onload="draw()">
 <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

Související články

HTML5

Externí odkazy

(anglicky) Specifikace WHATWG
(anglicky) Drawing Graphics with Canvas Archivováno 27. 6. 2010 na Wayback Machine. (příklady)